
import { Card } from 'react-vant';
import { Cell, Image } from 'react-vant'
function Index() {
  return (
    <div>
      {/* 9.实现素材图片中数据列表渲染，对前三名数据使用特殊样式 */}
      <Card.Body style={{display:'flex'}}>
      {/* 10.实现标题与列表数据的双向联动功能 */}
      <Card.Header style={{color:'red'}}>^</Card.Header>
        <Cell
         
          icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
          title="互联互通正塑造中国-中亚新格局"
        />
       
        
      </Card.Body>
      <Card.Body style={{display:'flex'}}>
      <Card.Header style={{color:'orange'}}>2</Card.Header>
        <Cell
         
          icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
          title="15西太洋雨中带弹驱离外机"
        />
       
        
      </Card.Body>
      <Card.Body style={{display:'flex'}}>
      <Card.Header style={{color:'yellow'}}>3</Card.Header>
        <Cell
         
          icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
          title="浙江-大学学费每人9.6万"
        />
       
        
      </Card.Body>
      <Card.Body style={{display:'flex'}}>
      <Card.Header style={{color:'yellow'}}>4</Card.Header>
        <Cell
         
          icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
          title="高温小心这些危险物品"
        />
       
        
      </Card.Body>
      <Card.Body style={{display:'flex'}}>
      <Card.Header style={{color:'yellow'}}>5</Card.Header>
        <Cell
         
          icon={<Image width={44} height={44} src='/demo_1.jpg' round />}
          title="曝光凤凰传奇演唱会取消与手表无关"
        />
       
        
      </Card.Body>
    </div>
  )
}

export default Index
